<!-- Headers -->
<div class="container-fluid" style="padding:0;">
  <!-- Header -->
  <header class="header">
    <div class="page-header">
      <span class="logo glyphicon glyphicon-user"></span>
      <span class="title">用户列表</span>
    </div>
  </header>

  <!-- Sub Header -->
  <header class="header sub">
      <div class="row-fluid">
        <div class="toolbar">
          <button type="button" class="btn btn-success" id="btn-new"><span class="glyphicon glyphicon-plus"></span> 新建用户</button>
          <button type="button" class="btn btn-default" id="btn-active" disabled="disabled"><span class="glyphicon glyphicon-ok ok"></span> 激活</button>
          <button type="button" class="btn btn-default" id="btn-ban" disabled="disabled"><span class="glyphicon glyphicon-ban-circle danger"></span> 冻结</button>
          <button type="button" class="btn btn-default" id="btn-delete" disabled="disabled"><span class="glyphicon glyphicon-remove danger"></span> 删除</button>
        </div>
        <div class="toolbar pull-right">
          <button type="button" class="btn btn-default btn-xs" id="btn-refresh"><span class="glyphicon glyphicon-refresh"></span> 刷新</button>
          <button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#help"><span class="glyphicon glyphicon-question-sign"></span> 帮助</button>
        </div>
      </div>
  </header>
</div>

<!-- Main component for a primary marketing message or call to action -->
<div class="container-fluid body">
  <table class="table table-striped table-bordered" id="users">
    <thead>
      <tr>
        <th width="1%" class="nowrap center"><input type="checkbox" role="check-all"/></th>
        <th width="15%">账号</th>
        <th width="5%">状态</th>
        <th width="10%">角色</th>
        <th width="20%">最近登录时间</th>
        <th width="10%">最近登录IP</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td colspan="6" class="dataTables_empty">数据加载中...</td>
      </tr>
    </tbody>
  </table>
</div>

<!-- Modals -->
<!--- User Add -->
<div class="modal fade" id="modal-user" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">新建用户</h4>
      </div>
      <div class="modal-body">
        <div class="alert alert-success hide" for="alert"></div>
        <form method='post' action='user/add' class="form-horizontal" id="form-user">
          <input type="hidden" name="account">
          <div class="form-group">
            <label class="col-sm-2 control-label">角色</label>
            <div class="col-sm-10">
              <select name="role" class="form-control">
                <option value="2">计划员</option>
                <option value="3">采购员</option>
                <option value="4">汇总员</option>
              </select>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" role="submit">&nbsp;确&nbsp;&nbsp;定&nbsp;</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal">&nbsp;取&nbsp;&nbsp;消&nbsp;</button>
      </div>
    </div>
  </div>
</div>
<!-- Help -->
<div class="modal fade" id="help" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">帮助</h4>
      </div>
      <div class="modal-body">
        <h4>角色说明</h4><hr>
        <p><span class="label label-danger">管理员</span>  系统最高权限持有者！(不能创建)</p>
        <p><span class="label label-primary">计划员</span>  项目材料计划人员。</p>
        <p><span class="label label-success">采购员</span>  采购人员！</p>
        <p><span class="label label-info">汇总员</span>  系统数据汇总人员。</p>
        <p><span class="label label-warning">材料员</span>  具体项目材料管理人。(项目内创建)</p>
        <p><span class="label label-default">施工员</span>  具体项目施工负责人。(项目内创建)</p><br>
        
        <h4>其他说明</h4><hr>
        <p>用户管理中支持对用户批量操作。</p>
        <p>当前用户不可冻结、激活或删除自己。</p>
        <p>如果用户被冻结，将不可登陆系统。</p>
      </div>
    </div>
  </div>
</div>

<link rel="stylesheet" type="text/css" href="css/jquery.table.min.css">
<script type="text/javascript" language="javascript" src="js/jquery.table.min.js"></script>
<script type="text/javascript" charset="utf-8">

  function change_selection() {
    var total = $("#users").find('td').find(':input[name=id]').length;
    var selected = $("#users").find('td').find(':checked').length;
    if (total == selected) $("#users").find('input[role="check-all"]').prop('checked', true);
    else $("#users").find('input[role="check-all"]').prop('checked', false);
    if (selected == 1) {
      $("#btn-active").attr('disabled',false); 
      $("#btn-ban").attr('disabled',false); 
      $("#btn-delete").attr('disabled',false); 
    } else if (selected > 1) {
      $("#btn-active").attr('disabled',false); 
      $("#btn-ban").attr('disabled',false); 
      $("#btn-delete").attr('disabled',false); 
    } else {
      $("#btn-active").attr('disabled',true); 
      $("#btn-ban").attr('disabled',true); 
      $("#btn-delete").attr('disabled',true); 
    }
    return false;
  }

  $( document ).ready(function() {

    var table = $('#users').dataTable( {
      "bProcessing": false,
      "bServerSide": true,
      "bFilter": false,
      "nPaging": true,
      "bSort": false,
      "bLengthChange": false,
      "fnFailed": function (error, thrown) {
        $.global.error = true;
        $("#modal-load").find("img").attr('src', 'images/warn.png');
        $("#modal-load").find("span").attr('class', 'label label-warning').html('内容加载失败，请稍后再试。');
        setTimeout(function(){$('#modal-load').modal('hide')} , $.global.timeout);
      },
      "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
        $('td:eq(0)', nRow).html( '<input type="checkbox" name="id" value="' + aData[0] + '" onclick="change_selection();">' );
        $('td:eq(2)', nRow).html( aData[2] == '0' ? '<span class="label label-warning">已禁用</span>' : '<span class="label label-success">使用中</span>' );
        if (aData[3] == 1) {
          $('td:eq(3)', nRow).html( '<span class="label label-danger">管理员</span>' );
        } else if (aData[3] == 2) {
          $('td:eq(3)', nRow).html( '<span class="label label-primary">计划员</span>' );
        } else if (aData[3] == 3) {
          $('td:eq(3)', nRow).html( '<span class="label label-success">采购员</span>' );
        } else if (aData[3] == 4) {
          $('td:eq(3)', nRow).html( '<span class="label label-info">汇总员</span>' );
        } else {
          $('td:eq(3)', nRow).html( '<span class="label label-danger">角色错误</span>' );
        }
        // Fix Login Info
        if (aData[4] == '1000-01-01 00:00:00') $('td:eq(4)', nRow).html( '<span class="label label-default">从未登录</span>' );
        if (aData[5] == '') $('td:eq(5)', nRow).html( '<span class="label label-default">未知</span>' );
      },
      "oLanguage": {
        "sProcessing":   "处理中...",
        "sLengthMenu":   "显示 _MENU_ 项结果",
        "sZeroRecords":  "没有匹配结果",
        "sInfo":         "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
        "sInfoEmpty":    "显示第 0 至 0 项结果，共 0 项",
        "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
        "sInfoPostFix":  "",
        "sSearch":       "搜索:",
        "sUrl":          "",
        "oPaginate": {
          "sFirst":    "<span class='glyphicon glyphicon-backward'></span>",
          "sPrevious": "<span class='glyphicon glyphicon-chevron-left'></span>",
          "sNext":     "<span class='glyphicon glyphicon-chevron-right'></span>",
          "sLast":     "<span class='glyphicon glyphicon-forward'></span>"
        }
      },
      "sAjaxSource": "user/find"
    } );

    var fn_refresh_table = function() {
      $("#users").find('input[role="check-all"]').prop('checked', false);
      $("#btn-active").attr('disabled',true); 
      $("#btn-ban").attr('disabled',true); 
      $("#btn-delete").attr('disabled',true); 
      $.global.error = false;
      $("#modal-load").find("img").attr('src', 'images/loader.gif');
      $("#modal-load").find("span").attr('class', 'label label-info').html('内容加载中，请稍后...'); 
      table.fnReloadAjax();
    }

    var fn_selected_users = function () {
      var ids = [];
      $("#users").find('td').find(':checked').each(function() {
        ids.push($(this).attr('value'));
      });
      return ids;
    }

    var fn_active_users = function(ids) {
      $.ajax({
        type: 'post',
        url: 'user/active',
        data: 'ids=' + ids,
        success: function(data, status) {
          if (data == undefined || data.status == undefined || data.status == 4) {
            $.global.error = true;
            $("#modal-load").find("img").attr('src', 'images/warn.png');
            $("#modal-load").find("span").attr('class', 'label label-warning').html('服务端异常，请联系管理员！');
            setTimeout(function(){fn_refresh_table()} , $.global.timeout);
          } else {
            if (data.status == -1) {
              $.global.error = true;
              $("#modal-load").find("img").attr('src', 'images/cross.png');
              $("#modal-load").find("span").attr('class', 'label label-danger').html('操作失败，非法操作！');
              setTimeout(function(){fn_refresh_table()} , $.global.timeout);
            } else if (data.status == 0) {
              $.global.error = true;
              $("#modal-load").find("img").attr('src', 'images/accept.png');
              $("#modal-load").find("span").attr('class', 'label label-success').html('操作成功，刷新数据。');
              setTimeout(function(){fn_refresh_table()} , $.global.timeout);
            } else {
              $.global.error = true;
              $("#modal-load").find("img").attr('src', 'images/warn.png');
              $("#modal-load").find("span").attr('class', 'label label-warning').html('服务端异常，操作失败！');
              setTimeout(function(){fn_refresh_table()} , $.global.timeout);
            }
          }
          //fn_refresh_table();
        },
        error: function(hxr, status, error) {
          $.global.error = true;
          $("#modal-load").find("img").attr('src', 'images/warn.png');
          $("#modal-load").find("span").attr('class', 'label label-warning').html('服务端异常，操作失败！');
          setTimeout(function(){fn_refresh_table()} , $.global.timeout);
        }
      });
    }

    var fn_ban_users = function(ids) {
      $.ajax({
        type: 'post',
        url: 'user/ban',
        data: 'ids=' + ids,
        success: function(data, status) {
          if (data == undefined || data.status == undefined || data.status == 4) {
            $.global.error = true;
            $("#modal-load").find("img").attr('src', 'images/warn.png');
            $("#modal-load").find("span").attr('class', 'label label-warning').html('服务端异常，请联系管理员！');
            setTimeout(function(){fn_refresh_table()} , $.global.timeout);
          } else {
            if (data.status == -1) {
              $.global.error = true;
              $("#modal-load").find("img").attr('src', 'images/cross.png');
              $("#modal-load").find("span").attr('class', 'label label-danger').html('操作失败，非法操作！');
              setTimeout(function(){fn_refresh_table()} , $.global.timeout);
            } else if (data.status == 0) {
              $.global.error = true;
              $("#modal-load").find("img").attr('src', 'images/accept.png');
              $("#modal-load").find("span").attr('class', 'label label-success').html('操作成功，刷新数据。');
              setTimeout(function(){fn_refresh_table()} , $.global.timeout);
            } else {
              $.global.error = true;
              $("#modal-load").find("img").attr('src', 'images/warn.png');
              $("#modal-load").find("span").attr('class', 'label label-warning').html('服务端异常，操作失败！');
              setTimeout(function(){fn_refresh_table()} , $.global.timeout);
            }
          }
          //fn_refresh_table();
        },
        error: function(hxr, status, error) {
          $.global.error = true;
          $("#modal-load").find("img").attr('src', 'images/warn.png');
          $("#modal-load").find("span").attr('class', 'label label-warning').html('服务端异常，操作失败！');
          setTimeout(function(){fn_refresh_table()} , $.global.timeout);
        }
      });
    }

    var fn_delete_users = function(ids) {
      $.ajax({
        type: 'post',
        url: 'user/delete',
        data: 'ids=' + ids,
        success: function(data, status) {
          if (data == undefined || data.status == undefined || data.status == 4) {
            $.global.error = true;
            $("#modal-load").find("img").attr('src', 'images/warn.png');
            $("#modal-load").find("span").attr('class', 'label label-warning').html('服务端异常，请联系管理员！');
            setTimeout(function(){fn_refresh_table()} , $.global.timeout);
          } else {
            if (data.status == -1) {
              $.global.error = true;
              $("#modal-load").find("img").attr('src', 'images/cross.png');
              $("#modal-load").find("span").attr('class', 'label label-danger').html('操作失败，非法操作！');
              setTimeout(function(){fn_refresh_table()} , $.global.timeout);
            } else if (data.status == 0) {
              $.global.error = true;
              $("#modal-load").find("img").attr('src', 'images/accept.png');
              $("#modal-load").find("span").attr('class', 'label label-success').html('操作成功，刷新数据。');
              setTimeout(function(){fn_refresh_table()} , $.global.timeout);
            } else {
              $.global.error = true;
              $("#modal-load").find("img").attr('src', 'images/warn.png');
              $("#modal-load").find("span").attr('class', 'label label-warning').html('服务端异常，操作失败！');
              setTimeout(function(){fn_refresh_table()} , $.global.timeout);
            }
          }
          //fn_refresh_table();
        },
        error: function(hxr, status, error) {
          $.global.error = true;
          $("#modal-load").find("img").attr('src', 'images/warn.png');
          $("#modal-load").find("span").attr('class', 'label label-warning').html('服务端异常，操作失败！');
          setTimeout(function(){fn_refresh_table()} , $.global.timeout);
        }
      });
    }

    // refresh
    $('#btn-refresh').click(fn_refresh_table);
    // active user
    $('#btn-active').click(function() {
      fn_active_users(fn_selected_users()); 
    });
    // ban users
    $('#btn-ban').click(function() {
      fn_ban_users(fn_selected_users());
    });
    // deleted users
    $('#btn-delete').click(function() {
      fn_delete_users(fn_selected_users());
    });

    // new user
    $("#btn-new").click(function() {
      $("#modal-user").find('div[for=alert]').attr('class', 'alert alert-success').html('').hide();
      $('#modal-user').modal({backdrop: 'static',show:true, keyboard: false});
    });

    $("#form-user").submit(function() {
      return false;
    });
    $("#modal-user").find(':input[role=submit]').click(function() {
      var form = $("#form-user");
      $.ajax({
        type: form.attr('method'),
        url: form.attr('action'),
        data: form.serialize(),
        success: function(data, status) {
          if (data == undefined || data.status == undefined || data.status != 0) {
            if (data == undefined || data.status == undefined) {
                $("#modal-user").find('div[for=alert]').attr('class', 'alert alert-danger').html('服务端错误，请联系管理员！').show();
            } else {
              if (data.status == 1) {
                $("#modal-user").find('div[for=alert]').attr('class', 'alert alert-warning').html('用户信息输入有误！').show();
              } else if (data.status == 2) {
                $("#modal-user").find('div[for=alert]').attr('class', 'alert alert-warning').html('所选择项目不可用！').show();
              } else {
                $("#modal-user").find('div[for=alert]').attr('class', 'alert alert-danger').html(data.msg == undefined ? '服务端异常，用户添加失败！' : data.msg).show();
              }
            }
          } else {
              if (data.account == undefined) {
                $("#modal-user").find('div[for=alert]').attr('class', 'alert alert-danger').html('服务端错误，请联系管理员！').show();
              } else {
                $("#modal-user").find('div[for=alert]').attr('class', 'alert alert-success').html('用户添加成功，账号：<strong>' + data.account + '</strong>').show();
                fn_refresh_table();
              }         
          }
        },
        error: function(hxr, status, error) {
          $("#modal-user").find('div[for=alert]').attr('class', 'alert alert-danger').html('服务端异常，用户添加失败！').show();
        }
      });
      return false;
    });

    $("#users").find('input[role="check-all"]').change(function() {
      if ($(this).prop('checked')) {
        $("#users").find('tbody').find('input[name="id"]').prop('checked', true);
        $("#btn-active").attr('disabled',false); 
        $("#btn-ban").attr('disabled',false); 
        $("#btn-delete").attr('disabled',fn_selected_users().length > 0 ? false : true); 
      } else {
        $("#users").find('tbody').find('input[name="id"]').prop('checked', false);
        $("#btn-active").attr('disabled',true); 
        $("#btn-ban").attr('disabled',true); 
        $("#btn-delete").attr('disabled',true); 
      }
    });
  });
</script>